import styles from './index.module.scss'
import classNames from 'classnames'
import { useEffect, useRef } from 'react'
interface prpos extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
  [x: string]: any;
  className?: string;
  errMsg?: string;
  value?: string
  maxLength?: number
}

export default function Textarea({ className, value = '', maxLength = 1000, errMsg, ...rest }: prpos) {
  const textareaRef = useRef<HTMLTextAreaElement>(null)
  useEffect(() => {
    textareaRef.current?.setSelectionRange(-1, -1)
  }, [])
  return (
    <div className={styles.root}>
      {/* 文本输入框 */}
      <textarea ref={textareaRef} value={value} maxLength={maxLength} className={classNames('textarea', className)}  {...rest} />
      {/* 当前字数/最大允许字数 */}
      <div className='count'>
        {value.length}/{maxLength}
      </div>
      {errMsg ? <div className='validate'>{errMsg}</div> : null}
    </div>
  )
}